<template>
  <div class="warp">
    <!-- 头部导航栏 -->
    <div class="hcontent">
      <van-icon name="wap-home-o" size="40px" />
      <p class="text">网易严选</p>
      <van-icon name="search" size="40px" />
      <van-icon name="shopping-cart-o" size="40px" />
    </div>

    <div class="empty3"></div>

    <!-- 网易图片 -->
    <div class="center">
      <van-image
        width="150px"
        height="50px"
        src="https://yanxuan.nosdn.127.net/static-union/164793255107785e.png"
      />
    </div>

    <div class="container">
      <van-form>
        <!-- 手机号 -->
        <van-cell-group inset>
          <van-field
            v-model="phone"
            name="手机号"
            border
            placeholder="手机号"
            :rules="[
              { required: true, message: '请输入手机号' },
              { pattern, message: '请输入正确的手机号' }
            ]"
          />
        </van-cell-group>

        <!-- 密码 -->
        <van-cell-group inset>
          <van-field
            v-model="password"
            required
            placeholder="密码"
            :rules="[{ required: true, message: '请填写密码' }]"
          />
        </van-cell-group>
      </van-form>
    </div>

    <div class="empty1"></div>
    <!-- 问题 -->
    <p class="S1" style="font-size: 15px; color: grey">遇到问题?</p>

    <div class="empty"></div>

    <!-- 登录大按钮 -->
    <div class="iphone">
      <van-button
        type="danger"
        block
        :disabled="!checked"
        @click="Login"
        style="width: 350px; height: 52px"
        >登录</van-button
      >
    </div>
    <div class="empty"></div>

    <!-- 复选框 -->
    <div class="two">
      <van-checkbox v-model="checked" shape="square" icon-size="14px">
        <p class="label-text">同意《服务条款》和 《隐私政策》和《网易严选服务协议》</p>
      </van-checkbox>
    </div>
    <div class="email">其他登录方式 ></div>
  </div>
</template>

<script lang="ts">
export default {
  name: 'PhLogin'
}
</script>

<script lang="ts" setup>
import { ref } from 'vue'
import { reqLogin } from '@/api/user'
import { saveStorage } from '@/utils/storage'
import { useUserInfoStore } from '@/stores/userInfo'
import { useRouter } from 'vue-router'
import { showSuccessToast } from 'vant/lib/toast'

const phone = ref('')
const password = ref('')
const checked = ref(false)

const router = useRouter()

// 手机号验证规则
const pattern =
  /^((13[0-9])|(14[5,7])|(15[0-3,5-9])|(17[0,3,5-8])|(18[0-9])|166|198|199|(147))\d{8}$/

const UserInfoStore = useUserInfoStore()

// 点击登录
const Login = async () => {
  const res = await reqLogin(phone.value, password.value)
  {
    if (res.code === 200) {
      // 将token存到本地
      saveStorage((res.data as any).token)
      UserInfoStore.token = (res.data as any).token
      showSuccessToast({
        message: '登录成功',
        forbidClick: true,
        loadingType: 'spinner',
        duration: 1000
      })
      // console.log('111')
      router.push('/yesLogin')
    }
  }
}
</script>

<style lang="less" scoped>
.hcontent {
  background-color: #f2f5f4;
  display: flex;
  justify-content: space-between;
  // height: 50px;
  line-height: 50px;
  text-align: center;
  width: 375px;
}
.center {
  text-align: center;
  margin-bottom: 35px;
}
.hcontent span {
  line-height: 50px;
  text-align: center;
  font-size: 20px;
}
.S1 {
  // text-align: center;
  margin-left: 10px;
}
.email {
  margin-top: 80px;
  text-align: center;
  font-size: 15px;
}
.empty {
  height: 50px;
  background-color: white;
  width: 375px;
}
.empty1 {
  height: 30px;
  width: 375px;
  background-color: white;
}
.label-text {
  font-size: 10px;
  color: blue;
}
.two {
  margin-left: 25px;
}
.empty3 {
  height: 40px;
  width: 375px;

  background-color: white;
}
.text {
  line-height: 40px;
}
.warp {
  width: 375px;
}
.iphone {
  margin-left: 12px;
}
</style>
